<template>
    <div class="digitalVillage">

        <div class="left">
            <!--概览-->
            <div>
                <Preview></Preview>
            </div>
            <!--农业产业结构-->
            <div>
                <div>
                    <nongyejiegou></nongyejiegou>
                </div>
                <div>
                    <hezuoshedengjifenbu></hezuoshedengjifenbu>
                </div>
            </div>
            <!--三次产业结构-->
            <div>
                <div>
                    <sancichanyejiegou></sancichanyejiegou>
                </div>
                <div>
                    <jingjishouruqushi></jingjishouruqushi>
                </div>
            </div>
        </div>


        <div class="middle">
            <!--3d map-->
            <map3D></map3D>
        </div>


        <div class="right">
            <!--养殖规模比重-->
            <div>
                <div>
                    <yangzhiguimohuabizhong></yangzhiguimohuabizhong>
                </div>
                <div>
                    <rouleichanliangjiegou></rouleichanliangjiegou>
                </div>
            </div>
            <!--耕地面积情况-->
            <div>
                <div>
                    <gendimianjiqingkuang></gendimianjiqingkuang>
                </div>
                <div>
                    <shucaipinzhongfengbu></shucaipinzhongfengbu>
                </div>
            </div>
            <!--主要农产品-->
            <div>
                <div>
                    <zhuyaonongchanpinzhi></zhuyaonongchanpinzhi>
                </div>
                <div>
                    <shuiguopinzhongfenbu></shuiguopinzhongfenbu>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Preview from "./gailan"
    import nongyejiegou from "./nongyechanyejiegou"
    import hezuoshedengjifenbu from "./hezuoshedengjifenbu"
    import sancichanyejiegou from "./sancichanyejiegou"
    import jingjishouruqushi from "./jingjishouruqushi"
    import yangzhiguimohuabizhong from "./yangzhiguimohuabizhong"
    import rouleichanliangjiegou from "./rouleichanliangjiegou"
    import gendimianjiqingkuang from "./gendimianjiqingkuang"
    import shucaipinzhongfengbu from "./shucaipinzhongfengbu"
    import zhuyaonongchanpinzhi from "./zhuyaonongchanpinzhi"
    import shuiguopinzhongfenbu from "./shuiguopinzhongfenbu"
    import map3D from "./map3D"

    export default {
        name: "Home",
        components: {
            Preview,
            nongyejiegou,
            hezuoshedengjifenbu,
            sancichanyejiegou,
            jingjishouruqushi,
            yangzhiguimohuabizhong,
            rouleichanliangjiegou,
            gendimianjiqingkuang,
            shucaipinzhongfengbu,
            zhuyaonongchanpinzhi,
            shuiguopinzhongfenbu,
            map3D
        },
        data() {
            return {}
        }
    };
</script>

<style lang="scss" scoped>
    .digitalVillage {
        height: 100%;
        padding: 40px;
        display: flex;

        > div {
            height: 100%;
        }

        .left {
            width: 2354px;
            /*background: red;*/

            display: flex;
            > div {
                /*background: aliceblue;*/
                &:nth-last-child(n+2) {
                    width: 30%;
                }
                &:nth-last-child(2) {
                    margin: 0 20px;
                    display: flex;
                    flex-direction: column;
                    > div {
                        /*background: bisque;*/

                        &:first-child {
                            height: 45%;
                        }
                        &:last-child {
                            margin-top: 20px;
                            flex: 1;
                        }
                    }

                }
                &:nth-of-type(3) {
                    flex: 1;

                    display: flex;
                    flex-direction: column;
                    > div {
                        /*background: bisque;*/

                        &:first-child {
                            height: 45%;
                        }
                        &:last-child {
                            margin-top: 20px;
                            flex: 1;
                        }
                    }

                }
            }

        }
        .middle {
            width: 1110px;
            /*background: green;*/
            margin: 0 20px
        }
        .right {
            flex: 1;
            /*background: green;*/
            display: flex;

            > div {
                display: flex;
                flex-direction: column;

                &:nth-of-type(1) {
                    width: 40%;
                }

                &:nth-of-type(2) {
                    /*width: 30%;*/
                    flex:1;
                    margin: 0 20px;
                }
                &:nth-of-type(3) {
                    flex: 1;
                }

                > div {
                    /*background: red;*/
                    &:first-child {
                        height: 56%;
                    }
                    &:last-child {
                        margin-top: 20px;
                        flex: 1;
                    }
                }
            }

        }
    }
</style>
